<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>小白唠嗑小室</title>
	</head>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		:root {
			--bgc: url('https://www.zxy1314.xyz/view.php/5f7e89029fe96e925461707385b72671.jpg');
		}
		body {
			box-sizing: border-box;
			padding: 20px;
			background-image: var(--bgc);
			background-size: 100%;
		}
		#box {
			/* background-color: rgba(255,255,255,.7); */
			background-color: rgba(0,0,0,.7);
			padding: 20px 10px;
			border-radius: 5px;
			box-sizing: border-box;
		}
		li {
			width: 100%;
			list-style: none;
			border: 1px solid blue;
			box-sizing: border-box;
			margin: 5px 0;
			padding: 5px 10px;
			border-radius: 5px;
			color: #333;
		}
		.ipt {
			border-radius: 5px;
			box-sizing: border-box;
			padding: 10px;
			width: 100%;
			font-size: 16px;
			font-weight: 700;
			outline: none;
			background-color: rgba(255,255,255,.7);
		}
		.btn {
			/* font-weight: 600; */
			margin-top: 15px;
			background-color: rgba(255,255,255,.3);
			border: 1px solid #666;
			width: 100%;
			padding: 10px;
			border-radius: 5px;
			font-size: 20px;
			cursor: pointer;
			transition: .3s;
			margin-bottom: 10px;
			color: #fff !important;
		}
		.btn:hover {
			color: #fff;
			border-color: #fff;
		}
		 [v-cloak] {
			display: none;
		}
		#floating-layer {
			width: .5rem;
			height: .5rem;
			border: 1px solid rgba(255,255,255,.9);
			border-radius: 50%;
			position: fixed;
			right: 0;
			bottom: 10%;
			transform: translateX(50%);
			opacity: .7;
			z-index: 1000;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: rgba(255,255,255,1);
			box-shadow: 0 0 5px rgba(0,0,0,.3);
			transition: .3s;
			font-size: 16px;
		}
		#floating-layer:hover {
			opacity: 1;
			transform: translateX(0);
		}
		.fade-enter-active, .fade-leave-active {
  			transition: opacity .5s;
		}
		.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
 		 	opacity: 0;
		}
	</style>
	<body>
		<div id="app" v-cloak>
			<div style="transform: translateX(-50%);position: fixed; top: 0;z-index: 1000;left: 50%; color: #fff;">{{ usermessage }}</div>
		<div id="box">
			<div>
				<div>
					<textarea style="max-width: 100%;" class="ipt" v-model="ipt_value" placeholder="请输入发送给小黑的聊天内容..."></textarea>
				</div>
				<button class="btn" @click="chatter">发 送 消 息 给 小 黑{{ otherpartyusername.length < 1 ? "" : `( ${otherpartyusername} )`}}</button>
			</div>
			<transition name="fade">
			<div v-show="setup_value">
			<div style="color: #333;margin-bottom: 10px;display: flex;justify-content: space-between;">
				<div style="cursor: pointer;color: #FFF;">历史消息：{{ list.length }}条</div>
				<div style="cursor: pointer;color: #FFF;" @click="clear">清理历史记录</div>
			</div>
			<ol id="chat">
				<li v-for="(item,index) of list" :key="index" :style="{'border-color': item.color}">
					<div><span :style="{color: item.color}">消息内容：</span><span style="color: #FFF">{{ item.message }}</span></div>
					<span :style="{color: item.color}">日期时间：</span>
					<div style="color: #FFF;">{{ item.time }}</div>
					<div :style="{color: item.color}">来自{{ item.myuser }}</div>
				</li>
			</ol>
			</div>
			</transition>
			<!-- 设置 -->
			<transition name="fade">
			<div v-show="!setup_value">
				<button style="width: 100%;" class="btn">
					<a style="text-decoration: none;color:#fff ;width: 100%;display: inline-block;" target="_back" href="https://www.zxy1314.xyz/upload.php">
						上 传 图 片 获 取 图 片 地 址
					</a>
				</button>
				<input v-model="img_value" type="text" style="border: 1px solid #333;" class="ipt" placeholder="请放入上传图片后地址...">
				<button style="color: #333" @click="img_btn" class="btn">设 置 背 景 主 题</button>
				<input type="text" style="border: 1px solid #333;" class="ipt" v-model="usercolor" placeholder="请输入颜色英文名" >
				<button style="color: #333" @click="user_color_btn" class="btn">设 置 我 的 消 息 颜 色</button>
				<input type="text" style="border: 1px solid #333;" class="ipt" v-model="otherparty" placeholder="请输入颜色英文名" >
				<button style="color: #333" @click="otherparty_color_btn" class="btn">设 置 对 方 消 息 颜 色</button>
			</div>
			</transition>
		</div>
		<!-- 浮层 -->
		<div id="floating-layer" @click="setup">
			设置
		</div>
		</div>
	</body>
	<script src="/index/js/vue.js"></script>
	<script src="/index/js/socket.io.js"></script>
	<script>
		// vue写法
		var app = new Vue({
		  el: '#app',
		  data(){
			  return {
				usermessage: "",
				ipt_value: '',
				list: [],
				setup_value: true,
				img_value: "",
				username: "小黑",
				otherpartyusername: "",
				usercolor:"pink",
				otherparty: "red",
				// url: "https://www.api-yht.xyz/"
				url: "http://192.168.10.168:3020"
			  }
		  },
		  created(){
			this.usercolor = window.localStorage.getItem('usercolor') || 'pink';
			this.otherparty = window.localStorage.getItem('otherparty') || 'red';
			this.username = prompt("请输入昵称(长度不能大于3)");
			if(this.username === "" || !this.username || this.username === null || this.username === undefined)location.reload();
			if(this.username.length > 3)location.reload();
			// console.log(this.username.length);
			// console.log(this.username);
			let socket = io.connect(this.url);
			// let socket = io.connect('http://127.0.0.1:3020');
			let valuewhite = JSON.parse(window.localStorage.getItem('valuewhite')) || [];
			// console.log(valuewhite);
			let img = JSON.parse(window.localStorage.getItem('img')) || "https://www.zxy1314.xyz/view.php/5f7e89029fe96e925461707385b72671.jpg";
			document.body.style.setProperty('--bgc',`url(${img})`);
			this.list = valuewhite;
			socket.on('whiteChat',(data) => {
				this.usermessage = data.message;
				// console.log(data,'whiteChat');
				if(data.time){
					this.otherpartyusername = data.username;
					this.list.unshift({ border:'blue',color: this.otherparty,myuser :`对方( ${data.username} )发来的消息`,message: data.whiteChat,time: this.dataTime(data.time) });
					window.localStorage.setItem('valuewhite',JSON.stringify(this.list));
				}
			});
		  },
		  methods: {
			otherparty_color_btn(){
				window.localStorage.setItem('otherparty',this.otherparty);
				alert('设置成功');
			},
			user_color_btn(){
				window.localStorage.setItem('usercolor',this.usercolor);
				alert('设置成功');
			},
			img_btn(){
				document.body.style.setProperty('--bgc',`url(${this.img_value})`);
				window.localStorage.setItem('img',JSON.stringify(this.img_value));
			},
			setup(){
				this.setup_value = !this.setup_value;
			},
			clear(){
				this.list = [];
				window.localStorage.removeItem('valuewhite');
				// 清理成功
				alert('清理历史记录成功');
			},
			chatter(){
				let value = JSON.parse(window.localStorage.getItem('valuewhite')) || [];
				let socket = io.connect(this.url);
				// let socket = io.connect('http://127.0.0.1:3020');
				if(this.ipt_value){
					// 发送数据到服务器-发送给小白
					socket.emit('whiteChat',{ blackChat: this.ipt_value,username: this.username});
					this.list.unshift({ border:'red',color: this.usercolor,myuser:'我的消息',message: this.ipt_value,time: this.dataTime(new Date()) });
					valuewhite = this.list;
					window.localStorage.setItem('valuewhite',JSON.stringify(valuewhite));
					this.ipt_value = '';
				}else{
					alert('请输入内容再发送噢~');
				}
			},
					// 定义格式化时间方法
		 	dataTime(dtStr){
		    	const dt = new Date(dtStr);
		    	const y = dt.getFullYear();
		    	const m = padZero(dt.getMonth() + 1);
		    	const d = padZero(dt.getDate());
		    	const hh = padZero(dt.getHours());
		    	const mm = padZero(dt.getMinutes());
		    	const ss = padZero(dt.getSeconds());
		    	return `${y}年${m}月${d}日 ${hh}时${mm}分${ss}秒`;
				function padZero(n){
		    	return n > 9 ? n : '0' + n;
				};
			}
		}
		});
		// 函数封装
		(function (designWidth, maxWidth) {
			let doc = document,
			    win = window;
			let docEl = doc.documentElement;
			let tid;
			let rootItem, rootStyle;
		
			function refreshRem() {
		    let width = docEl.getBoundingClientRect().width;
		    if (!maxWidth) {
		        maxWidth = 540;
		    }
		    ;
		    if (width > maxWidth) {
		        width = maxWidth;
		    }
		    //与淘宝做法不同，直接采用简单的rem换算方法1rem=100px
		    let rem = width * 100 / designWidth;
		    //兼容UC开始
		    rootStyle = "html{font-size:" + rem + 'px !important}';
		    rootItem = document.getElementById('rootsize') || document.createElement("style");
		    if (!document.getElementById('rootsize')) {
		        document.getElementsByTagName("head")[0].appendChild(rootItem);
		        rootItem.id = 'rootsize';
		    }
		    if (rootItem.styleSheet) {
		        rootItem.styleSheet.disabled || (rootItem.styleSheet.cssText = rootStyle)
		    } else {
		        try {
		            rootItem.innerHTML = rootStyle
		        } catch (f) {
		            rootItem.innerText = rootStyle
		        }
		    }
		    //兼容UC结束
		    docEl.style.fontSize = rem + "px";
		};
		refreshRem();
		
		win.addEventListener("resize", function () {
		    clearTimeout(tid); //防止执行两次
		    tid = setTimeout(refreshRem, 300);
		}, false);
		
		win.addEventListener("pageshow", function (e) {
		    if (e.persisted) { // 浏览器后退的时候重新计算
		        clearTimeout(tid);
		        tid = setTimeout(refreshRem, 300);
		    }
		}, false);
		
		if (doc.readyState === "complete") {
		    doc.body.style.fontSize = "16px";
		} else {
		    doc.addEventListener("DOMContentLoaded", function (e) {
		        doc.body.style.fontSize = "16px";
		    }, false);
		}
		})(375, 750);
	    let socket = io.connect('http://192.168.10.168:3020');
		// 调用聊天函数
		// chatter();
		// 发送聊天信息
		// function chatter(){
		// 	socket.on('blackChat',(data) => {
		// 		if(data.blackChat)$("#chat").innerHTML += `<li style="border-color: red;"><span>${dataTime(data.time)}</span> 对方小白发来消息：${data.blackChat}</li>`;
		// 	});
		// 	$('#btn').onclick = () => {
		// 		let ipt_value = $('#ipt').value;
		// 		if(ipt_value){
		// 			$("#chat").innerHTML += `<li><span>${dataTime(new Date())}</span> 我(小黑)：${ipt_value}</li>`;
		// 			// 发送数据到服务器-发送给小白
		// 			socket.emit('blackChat',{ whiteChat: ipt_value });
		// 			$('#ipt').value = '';
		// 		}else{
		// 			alert('请输入内容再发送噢~');
		// 		}
		// 	};
		// };
		// 定义格式化时间方法
		function dataTime(dtStr){
		    const dt = new Date(dtStr);
		    const y = dt.getFullYear();
		    const m = padZero(dt.getMonth() + 1);
		    const d = padZero(dt.getDate());
		
		    const hh = padZero(dt.getHours());
		    const mm = padZero(dt.getMinutes());
		    const ss = padZero(dt.getSeconds());
		    return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
		};
		function padZero(n){
		    return n > 9 ? n : '0' + n;
		};
		// 封装获取dom元素代码
		function $(ele){
			let a = document.querySelectorAll(ele);
			return a.length === 1 ? a[0] : a;
		};
	</script>
	
</html>
